<template>
    <el-container class="mev-div-border" style="color: white">
        <el-header style="height: 15px;">
            <el-row>
                <el-col :span="8" style="text-align: left;">
                    矢量场
                </el-col>
                <el-col :span="16" style="text-align: right;">
                    <i @click="close()" size="medium" class="el-icon-close"></i>
                </el-col>
            </el-row>
        </el-header>
        <el-divider></el-divider>
        <el-main>
            <el-row>
                <el-col :span="24">
                    <!--  <el-select size="small" style="width: 100%" v-model="value" placeholder="选择数据">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                    </el-select>-->
                    <el-select v-model="value" placeholder="选择数据">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                    </el-select>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-date-picker style="width: 100%" size="small" v-model="dateval" type="date" placeholder="选择日期"> </el-date-picker>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-button @click="load" size="medium">确定</el-button>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-button @click="close" size="medium">关闭</el-button>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</template>

<script>
import Wind from "../../../plugins/mev/wind/wind";
import HeatMap from "../../../plugins/mev/wind/heatMap";

export default {
    name: "WindComponent",
    data() {
        return {
            dateval: "2020-07-22",
            options: [
                { value: 1, label: "风场" },
                { value: 2, label: "洋流" },
                { value: 3, label: "云" },
                { value: 4, label: "降水" },
                { value: 5, label: "气压" }
            ],
            value: "",
            wind: null,
            STP: null
        };
    },
    mounted() {},
    beforeDestroy() {
        let that = this;
        this.value;
        if (this.wind != null) {
            this.wind.close();
            this.wind = null;
        }

        if (this.STP != null) {
            HeatMap.deleteHeatMap(window.cesiumViewer, this.STP);
        }
    },
    methods: {
        load: function() {
            let that = this;
            HeatMap.deleteHeatMap(window.cesiumViewer, this.STP);
            Wind.prototype.close;
            if (that.value > 2) {
                that.STP = HeatMap.initHeatMap(that.value, window.cesiumViewer, this.STP);
            } else {
                if (that.wind == null) {
                    that.wind = new Wind();
                    that.wind.test();
                }
            }
        },
        close: function() {
            if (this.$route.name !== "EmptyComponent") {
                this.$router.push({ name: "EmptyComponent" });
            }
        }
    }
};
</script>

<style scoped>
.el-row {
    margin-top: 10px;
    vertical-align: middle;
}
.el-button {
    width: 100%;
}
.el-divider {
    background-color: #3e4246;
}
</style>
